<template>
  <div class="demo">
    <div class="demo-title">悬停点击弹出窗口</div>
    <div class="demo-content">
      <Popover
        style="width: 500px"
        title="Hover title"
        trigger="hover"
        :visible="hovered"
        @visible-change="handleHoverChange"
      >
        <template #content>
          <div>This is hover content.</div>
        </template>
        <Popover
          title="Click title"
          trigger="click"
          :visible="clicked"
          @visible-change="handleClickChange"
        >
          <template #content>
            <div>
              <div>This is click content.</div>
              <a @click="hide">Close</a>
            </div>
          </template>
          <Button>Hover and click / 悬停并单击</Button>
        </Popover>
      </Popover>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Button from '@sscd/button';
  import Popover from '@sscd/popover';
  const clicked = ref<boolean>(false);
  const hovered = ref<boolean>(false);
  const hide = () => {
    clicked.value = false;
    hovered.value = false;
  };
  const handleHoverChange = (visible: boolean) => {
    clicked.value = false;
    hovered.value = visible;
  };
  const handleClickChange = (visible: boolean) => {
    clicked.value = visible;
    hovered.value = false;
  };
</script>
